<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
      .container {
        width: 200px;
        height: 200px;
        border: 2px solid #f1f2f4;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .font-radio-name {
        margin-top: 10px;
      }
      .font-radio-mr {
        margin-right: 20px;
      }
      .container span {
        display: inline-block;
        margin-bottom: 10px;
      }
      .font-icon-item-checkbox {
        position: relative;
      }
      .form-check-label {
        cursor: pointer;
      }
      .font-icon-item-checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        right: -5px;
        bottom: -10px;
        border: 1px solid rgba(24, 190, 107, 1);
        border-radius: 3px;
        background-color: rgba(24, 190, 107, 1);
        box-sizing: border-box;
      }

      .font-icon-item-checkbox label::after {
        content: "";
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 12px;
        height: 6px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-right-color: transparent;
        -ms-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
      }
      /* 
        点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框  
        outline 属性规定元素外面的格式、颜色与宽度, 轮廓线不占据任何布局空间 
        outline-offset: 轮廓偏移,负值就是向内偏移 
        PC端轮廓外框消失了，然而发现在手机上依然存在~~,这时候添加如下代码便可
        a{
            outline:none; 
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        outline:outlineWidth outlineStyle outlineColor;
    */
      .font-icon-item-checkbox input[type="checkbox"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        background-color: rgba(24, 190, 107, 1);
        border-color: rgba(24, 190, 107, 1);
      }

      .font-icon-item-checkbox input[type="checkbox"] {
        visibility: hidden;
      }

      .font-item-radio label::before {
        content: " ";
        display: inline-block;
        vertical-align: -3px;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid rgba(234, 234, 234, 1);
        text-indent: 2px;
        line-height: 0.35;
        padding: 3px;
      }
      /*clip 属性剪裁绝对定位元素,配合其属性关键字rect可以实现元素的矩形裁剪效果, 只有 position:absolute 的时候才是生效的。*/
      .font-item-radio input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        clip: rect(0px 0px 0px 0px); /*IE87 及以下浏览器支持，解决方法*/
      }
      /*background-clip共有三个设定值，分别是：border-box（预设值）、padding-box、content-box */
      .font-item-radio input[type="radio"]:checked + label::before {
        background-color: rgba(24, 144, 255, 1);
        padding: 3px;
        background-clip: content-box;
        border: 1px solid rgba(24, 144, 255, 1);
      }
      .word-content {
        cursor: pointer;
      }
    </style>
    <script>
      function checkClick() {
        $(".font-icon-item-checkbox").toggle();
      }

      $(function() {
        //初始化赋值
        $("input[type='radio'][name='source']")
          .eq(0)
          .prop("checked", true); //默认选中有

        //jquery的写法 判断是否被选中，选择是true，否则为false
        var booleanRadio = $("input[type='radio'][name='source']").is(
          ":checked"
        );
        if (booleanRadio) {
          $("input[type='radio'][name='source']").attr("checked", false); //取消选中
        }

        $("#button").bind("click", function() {
          var sourceVal = $("input[name='source']:checked").val();
          console.log(sourceVal);
        });

        //js的写法
        // $("input[type=radio][name='source']").change(function() {
        //   if (this.value == "1") {
        //     console.log(111);
        //   } else if (this.value == "0") {
        //     console.log(222);
        //   }
        // });
      });
    </script>
  </head>
  <body>
    <h3>利用css的：after跟transform属性代替checkbox效果</h3>
    <div class="container" onclick="checkClick()">
      <!--checkbox -->
      <span class="font-icon-item-checkbox">
        <input type="checkbox" class="form-check-input" id="check-box" />
        <label class="form-check-label" for="check-box"></label>
      </span>

      <!--radio -->
      <span class="font-radio-name"><label>任务来源列表</label></span>
      <span class="font-item-radio">
        <input type="radio" name="source" id="source1" value="1" />
        <label for="source1" class="word-content font-radio-mr"> 显示</label>
        <input type="radio" name="source" id="source2" value="0" />
        <label for="source2" class="word-content "> 不显示</label>
      </span>
      <!--提交 --->
      <div class="font-button">
        <button id="button" type="button">提交</button>
      </div>
    </div>
  </body>
</html>
